<template>
	<div class="index-home">
	<header style="border-bottom: 1px solid #e6e6e6">
                试验类型
                <el-select @change="changeType" v-model="testType" placeholder="请选择"  clearable style="width: 200px;margin:10px 0% 10px 30px;">
                    <el-option
                            label="预试验"
                            value="0">
                    </el-option>
                    <el-option
                            label="正式试验"
                            value="1">
                    </el-option>
                    <el-option
                            label="预试验+正式试验"
                            value="">
                    </el-option>
                </el-select>
            </header>
			<header style="position: relative">
				研究对象入组情况
				<div class="positionDiv">
					<ul class="clearfix">
						<li v-for='(item,index) in dateArray' :key="index" @click="changeDate(index)" :class="{active:activeName==index}">
							<span>{{item}}</span>
						</li>
					</ul>
				</div>
			</header>
			<div class="div-echarts">
				<div class="sys-body" >
					<echarts :options="chartsInfo6" chartId="infoChart6"></echarts>
				</div>
			</div>
			<header>
				研究对象入组社区分布
				<el-select @change="changeDis" v-model="districtNo" placeholder="请选择地区"  clearable style="width: 200px;margin:10px 0% 10px 30px;display:inline-block">
					<el-option
							v-for="item in optionDiq"
							:key="item.DistrictName"
							:label="item.DistrictName"
							:value="item.DistrictNo">
					</el-option>
				</el-select>
				<span style="margin-left:30px;">入组日期</span>
				<div   style="width: 300px;margin:10px 0% 10px 30px;display:inline-block">
                    <el-date-picker
							 @change="changeDis"
                            v-model="timeDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            :default-value="defaultValue"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                    </el-date-picker>
                </div>
			</header>
			<div class="div-echarts">

				<div class="sys-body" >
					<echarts :options="chartsInfo4" chartId="infoChart4"></echarts>
				</div>
			</div>
			
			<header>
				研究对象分布情况
			</header>
			<div class="div-echarts">
				<el-row type="flex" justify="space-around">
				    <el-col :span="6">
				  		<div class="sys-body" >
							<echarts :options="chartsInfo2" chartId="infoChart2"></echarts>
						</div>
				    </el-col>
				    <el-col :span="6">
				  		<div class="sys-body" >
							<echarts :options="chartsInfo3" chartId="infoChart3"></echarts>
						</div>
				    </el-col>
				    <el-col :span="6">
				  		<div class="sys-body">
							<echarts :options="chartsInfo5" chartId="infoChart5"></echarts>
						</div>
				    </el-col>
				</el-row>
			</div>
			<div class="div-echarts">
				<el-row type="flex" justify="space-around">
					<el-col :span="6">
						<div class="sys-body" >
							<echarts :options="chartsInfo12" chartId="infoChart12"></echarts>
						</div>
					</el-col>
				    <el-col :span="6">
						<div class="sys-body" >
							<echarts :options="chartsInfo7" chartId="infoChart7"></echarts>
						</div>
				    </el-col>
				    <el-col :span="6" style="position: relative">
						<div class="sys-body" >
							<echarts :options="chartsInfo8" chartId="infoChart8"></echarts>
						</div>
				    </el-col>


				</el-row>
			</div>
			<div class="div-echarts">
				<el-row type="flex" justify="space-around">
					<el-col :span="6">
						<div class="sys-body" >
							<echarts :options="chartsInfo9" chartId="infoChart9"></echarts>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="sys-body" >
							<echarts :options="chartsInfo10" chartId="infoChart10"></echarts>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="sys-body" >
							<echarts :options="chartsInfo11" chartId="infoChart11"></echarts>
						</div>
					</el-col>

				</el-row>
			</div>
		</div>
	</div>
</template>
<script>
	import echarts from "../home/echarts.vue"   //正式环境出现问题，吧echarts全部注释掉
	import {mapGetters} from 'vuex'
	var data2=''
	var data3=''
	var data5=''
	var data7=''
	var data8=''
	var data9=''
	var data6=[];
	var data10=[];
	var data11=[];
	var data12=[];
	export default{
		components: {
			echarts
		},
		computed: {
			...mapGetters([
				'token',
				'RoleGroup'
			]),
	},
	data(){
		return {
			loading:true,
			tableData:[],
			timeDate:[],
			defaultValue:['2018-08-01',new Date()],
			dateArray:['天','周','月','年'],
			pageId:1,
			total:null,
			activeName:null,
			testType:'',
			loading:false,
			districtNo:'310104',
			optionDiq:[],
			pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                }
                }, {
                    text: '最近一个月',
                            onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                            onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }],
                disabledDate:function(val){
                    if(val>new Date())return true
                }
            },
			riverCla:{
				Perall:'',
				Acent:'',
				Perone:'',
				Pertwo:'',
				Acent2:'',
				Acent1:'',
				PerallS:'',
				AcentS:'',
				PeroneS:'',
				PertwoS:'',
				Acent2S:'',
				Acent1S:''
			},
			pageSize:10,
			FatherNotInCount:'',
			chartsInfo2: {
				title : {
					text: '研究对象人数',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#97ccf6', '#fbb1cf','#FFCC66'],
				tooltip : {
					trigger: 'item',
					// formatter: "{b} : {c} ({d}.percent.toFixed(1)+%)"
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['孕前期','怀孕期','儿童期'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data2.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data2[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: '研究对象人数',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					},
				]
			},
			chartsInfo3: {
				title : {
					text: '研究对象人数',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#D0D1D2', '#f1c210'],
				tooltip : {
					trigger: 'item',
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['A','B'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data3.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data3[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: '研究对象人数',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					}
				]
			},
			chartsInfo4: {
        //社区
        color: ["#04BBBF"],
        tooltip: {
          trigger: "item",
          formatter: "社区{b} : {c}(人)",
        },
        legend: {
          orient: "horizontal",
          x: "90%",
          y: "top",
          data: ["怀孕期", "孕前期"],
        },
        xAxis: {
          type: "category",
          name: "社区",
          nameLocation: "end",
          position: "bottom",
          nameGap: "30",
          data: [],
        },
        grid: {
          left: "3%",
          right: "8%",
          bottom: "10%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
          name: "人数",
        },
        series: [
          {
            name: "怀孕期",
            type: "bar",
            stack: "sum",
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                },
                color: "#fbb2cf",
              },
            },
            data: [],
          },
          {
            name: "孕前期",
            type: "bar",
            stack: "sum",
            barWidth: 20,
            itemStyle: {
              normal: {
                label: {
                  show: true, //是否展示
                },
                color: "#97ccf6",
              },
            },
            data: [],
          },
        ],
      },
			///
			chartsInfo6:{
				tooltip : {
					trigger: 'axis',
					axisPointer : {
						type : 'shadow',
						label: {
							show: true
						}
					}
				},
				calculable : false,
				dataZoom: [
					{
						show: true,
						start: 60,
						end: 100
					},
					{
						type: 'inside',
						start:60,
						end: 100
					},
				],
				legend: {
					orient: 'horizontal',
					x: '90%',
					y: 'top',
					data:['怀孕期','孕前期']
				},

				grid: {
					left: '3%',
					right: '8%',
					bottom: '10%',
					containLabel: true
				},
				xAxis : {
					type : 'category',
					data :[],
					axisLabel: {
						rotate: 45, //刻度旋转45度角
						textStyle: {
							color: "#333333",
							fontSize: 14
						}
					}
				},
				yAxis : {
					type : 'value',
					name:'人数'
				},
				series : [
					{
						name:'怀孕期',
						type:'bar',
						stack:'sum',
						barWidth : 20,
						itemStyle:{
							normal:{
								label: {
									show: true,//是否展示
								},
								color:'#fbb2cf'
							}
						},
						data:[]
					},
					{
						name:'孕前期',
						type:'bar',
						stack:'sum',
						barWidth : 20,
						itemStyle:{
							normal:{
								label: {
									show: true,//是否展示
								},
								color:'#97ccf6'
							}
						},
						data:[]
					},
				]
			},
			chartsInfo5: {
				title : {
					text: '研究对象人数',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#f1c210', '#D0D1D2'],
				tooltip : {
					trigger: 'item',
					formatter:function(data){ return data.name + ':' + data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['活跃','不活跃'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data5.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data5[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: '研究对象人数',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					}
				]
			},
			chartsInfo7: {
				title : {
					text: '研究对象人数',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#f1c210', '#D0D1D2'],
				tooltip : {
					trigger: 'item',
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['父亲入组','父亲未入组'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data7.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data7[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: '研究对象人数',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					}
				]
			},
			chartsInfo8: {
				title : {
					text: 'A组研究对象',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#97ccf6', '#fbb2cf','#FFCC66'],
				tooltip : {
					trigger: 'item',
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['孕前期','怀孕期','儿童期'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data8.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data8[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: 'A组研究对象',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						label: {
						    normal: {
						        position: 'inner'
						    }
						},
					}
				]
			},
			chartsInfo9: {
				title : {
					text: 'B组研究对象',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#97ccf6', '#fbb2cf','#FFCC66'],
				tooltip : {
					trigger: 'item',
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['孕前期','怀孕期','儿童期'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data9.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data9[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: 'B组研究对象',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					}
				]
			},
			chartsInfo10: {
				title : {
					text: '孕前入组研究对象  ',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:[ '#fbb1cf','#97ccf6'],
				tooltip : {
					trigger: 'item',
					// formatter: "{b} : {c} ({d}.percent.toFixed(1)+%)"
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['已转怀孕期','未转怀孕期'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data10.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data10[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: '研究对象人数',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					},
				]
			},
			chartsInfo11: {
				title : {
					text: '孕前、孕期AA人数 ',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#9475BC', '#E25488'],
				tooltip : {
					trigger: 'item',
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['A-AA','AA'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data11.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data11[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: '研究对象人数',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					},
				]
			},
			chartsInfo12: {
				title : {
					text: '不活跃对象',
					x : '16%',
					y : '60%',
					textStyle:{
						fontSize:'15',
						color:'#333333'
					}
				},
				color:['#FF6699', '#0099FF','#FFCC66'],
				tooltip : {
					trigger: 'item',
					// formatter: "{b} : {c} ({d}.percent.toFixed(1)+%)"
					formatter:function(data){ return data.name + ':' +  data.percent.toFixed(1)+"%";}
				},
				legend: {
					x : '16%',
					y : '68%',
					orient : 'vertical',
					data: ['A-AA','A-A','B'],
					formatter: function(name) {
						let index = 0;
						let num=0;
						let percen=''
						data12.forEach(function(value,i){
							num+=value.value
							if(value.name == name){
								index = i;
								percen=value.value
							}
						});
						return name + " " + data12[index].value+ "    "+'('+ (percen/num*100).toFixed(1)+"%"+')';
					}
				},
				series : [
					{
						name: '不活跃对象',
						type: 'pie',
						radius : '90px',
						center: ['45%', '30%'],
						data:[],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							},
							normal : {
								label : {
									show : false   //隐藏标示文字
								},
								labelLine : {
									show : false   //隐藏标示线
								}
							}
						}
					},
				]
			},
		}
	},
	methods:{
		GetCommunityDistrict:function(){    //获取社区行政区
			let that = this;
			that.service({
				url: "/Dic/GetCommunityDistrict",
				method: "get",
				params: {
				}
			}).then(response => {
				that.optionDiq=response.dtData;
			})
			.catch(data => {

			});
		},
		changeDate:function(index){
			let that=this;
			that.activeName=index
			that.service({
				url:'/ResearchObject/GetUserByDate',
				method:'get',
				params:{
					dateType:index+1,
					testType:that.testType
				}
			}).then(response=>{
				let arrForm=response.dtData;
				let arrPerone=[],arrPertwo=[],arrDate=[];
				for(let item of arrForm){
					arrPerone.push(item.Period1Count)   //孕前
					arrPertwo.push(item.Period2Count)   //怀孕
					arrDate.push(item.ConfirrmTime)     //时间
				}
				that.chartsInfo6.xAxis.data= arrDate;
				that.chartsInfo6.series[0].data=arrPertwo;
				that.chartsInfo6.series[1].data=arrPerone;
			}).catch(data=>{

			})
		},
		changeDis:function(){
			let that = this
			this.service({
				url:'/ResearchObject/GetUserCountByCommunity',
				method:'get',
				params:{
					districtNo:this.districtNo,
					testType:this.testType,
					startDate:this.timeDate?this.timeDate[0]:'',
                    endDate:this.timeDate?this.timeDate[1]:'',
				}
			}).then(response=>{
				 let arrForm = response.dtData;
          let arrName = [],
            arrData = [];
          let arrPerone = [],
            arrPertwo = [];
          for (let item of arrForm) {
            arrPerone.push(item.Period1Count); //孕前
            arrPertwo.push(item.Period2Count); //怀孕
            arrName.push(item.CName);
            arrData.push(item.UserCount);
          }
          that.chartsInfo4.xAxis.data = arrName;
          that.chartsInfo4.series[0].data = arrPertwo;
          that.chartsInfo4.series[1].data = arrPerone;
			}).catch(data=>{

			})
		},
		changeType(val){
            let that=this;
			that.GetIndexDate()
			that.GetCommunityDistrict()
			$(function () {
				that.changeDate(0)
			})
        },
		GetIndexDate:function(){
			let that=this;
			//社区
			that.service({
				url:'/ResearchObject/GetUserCountByCommunity',
				method:'get',
				params:{
					districtNo:this.districtNo,
					testType:that.testType,
					startDate:that.timeDate?that.timeDate[0]:'',
                    endDate:that.timeDate?that.timeDate[1]:'',
				}
			}).then(response=>{
				let arrForm = response.dtData;
          let arrName = [],
            arrData = [];
          let arrPerone = [],
            arrPertwo = [];
          for (let item of arrForm) {
            arrPerone.push(item.Period1Count); //孕前
            arrPertwo.push(item.Period2Count); //怀孕
            arrName.push(item.CName);
            arrData.push(item.UserCount);
          }
          that.chartsInfo4.xAxis.data = arrName;
          that.chartsInfo4.series[0].data = arrPertwo;
          that.chartsInfo4.series[1].data = arrPerone;
			}).catch(data=>{

			})
			//用户统计数据
			that.service({
				url:'/ResearchObject/GetUserStatisticData',
				method:'get',
				params:{
					testType:that.testType
				}
			}).then(response=>{
				let dataRow=response.dtData[0]
				that.chartsInfo2.series[0].data=[ {value:dataRow.ObjectPeriod1,name:'孕前期'},{value:dataRow.ObjectPeriod2,name:'怀孕期'},{value:dataRow.ObjectPeriod3,name:'儿童期'}]
				data2 =that.chartsInfo2.series[0].data;
				that.chartsInfo2.title.text='研究对象人数   '+''+dataRow.ObjectTotalCount
				//
				that.chartsInfo3.series[0].data=[ {value:dataRow.ATotalCount,name:'A'},{value:dataRow.BTotalCount,name:'B'}]
				data3 =that.chartsInfo3.series[0].data;
				that.chartsInfo3.title.text='研究对象人数   '+''+dataRow.ObjectTotalCount


				that.chartsInfo5.series[0].data=[ {value:dataRow.ActiveCount,name:'活跃'},{value:dataRow.UnActiveCount,name:'不活跃'}]
				data5 =that.chartsInfo5.series[0].data;
				that.chartsInfo5.title.text='研究对象人数   '+''+dataRow.ObjectTotalCount
				//

				that.FatherNotInCount = dataRow.ObjectTotalCount - dataRow.FatherInCount

				that.chartsInfo7.series[0].data=[ {value:dataRow.FatherInCount,name:'父亲入组'},{value:this.FatherNotInCount,name:'父亲未入组'}]
				data7 =that.chartsInfo7.series[0].data;
				that.chartsInfo7.title.text='研究对象人数   '+''+dataRow.ObjectTotalCount

				that.chartsInfo8.series[0].data=[{value:dataRow.APeriod1Count,name:'孕前期'}, {value:dataRow.APeriod2Count,name:'怀孕期'},{value:dataRow.APeriod3Count,name:'儿童期'}]

				data8 =that.chartsInfo8.series[0].data;
				
				that.chartsInfo9.series[0].data=[ {value:dataRow.BPeriod1Count,name:'孕前期'},{value:dataRow.BPeriod2Count,name:'怀孕期'},{value:dataRow.BPeriod3Count,name:'儿童期'}]
				data9 =that.chartsInfo9.series[0].data;
				that.chartsInfo9.title.text='B组研究对象   '+''+dataRow.BTotalCount
				let allnum=0,onenum=0,twonum= 0;
				for(let i of data8){
					allnum+= i.value
				}


				//孕前期入组对象
				that.chartsInfo10.series[0].data=[ {value:dataRow.PreToPregnantCount ,name:'已转怀孕期'},{value:dataRow.UnPreToPregnantCount ,name:'未转怀孕期'}]
				that.chartsInfo10.title.text='孕前入组研究对象  '+' '+dataRow.PreInGroupCount;
				data10 =that.chartsInfo10.series[0].data;
				//当前AA人数
				that.chartsInfo11.series[0].data=[{value:dataRow.AToAACount  ,name:'A-AA'},{value:dataRow.AAToAACount  ,name:'AA'}]
				that.chartsInfo11.title.text='孕前、孕期AA人数   '+' '+dataRow.AACount;
				data11 =that.chartsInfo11.series[0].data;
				//bu活跃
				that.chartsInfo12.series[0].data=[{value:dataRow.UnActiveAACount  ,name:'A-AA'},{value:dataRow.UnActiveACount
					,name:'A-A'},{value:dataRow.UnActiveBCount,name:'B'}]
				that.chartsInfo12.title.text='不活跃对象  '+' '+dataRow.UnActiveCount;
				data12 =that.chartsInfo12.series[0].data;
			}).catch(data=>{
				console.log(data)
			})
		},
	},
	mounted:function(){
		let that=this;
		that.timeDate= [
            '2018-06-01',
            (new Date().getFullYear()+'-'+addZero((new Date().getMonth()+1))+'-'+addZero(new Date().getDate())),
        ];   //初始化时间范围
		that.GetIndexDate()
		that.GetCommunityDistrict()
		$(function () {
			that.changeDate(0)
		})
	},
	created(){

	}
	}
	function addZero(s){
    return s < 10 ? '0' + s: s;
}
function dateForm(data){
    return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
}
</script>
<style scoped lang="scss">
	.index-home{
	header{
		padding:20px;
	}
	.div-echarts{
		width:100%;
	ul{
		li{	
			display: inline-block;
			width: 30%;
			text-align: center;
		}
	}
	}
	.div-table{
		padding:20px;
	.p1{
		padding-left: 0px;
		color: #333;
		margin-bottom:15px;
	span{
		cursor: pointer;
		color: #0066FF;
		padding-left: 20px;
	}
	}
	}
	}
	.positionDiv{
		position: absolute;
		top: 100%;
		left:45%;
	ul{
	li{
		float: left;
		width: 50px;
		border:1px solid #ccc;
		margin:0 1px;
		text-align: center;
		border-radius:6px;
		padding:3px 0px;
		cursor: pointer;
	span{
	}
	}
	.active{
		background: #0099FF;
		color: #fff;
	}
	}
	}
	.riverCla .p2{padding-left: 32px;line-height: 1.3}
	.riverCla p{font-size: 13px;color: #333}
	.riverCla .span1{width: 25px;height: 14px;background: #9475BC;display: inline-block;margin-right: 10px;border-radius: 4px;}
	.riverCla .span2{width: 25px;height: 14px;background: #E25488;display: inline-block;margin-right: 10px;border-radius: 4px;}
</style>